<template>
	<view class="flex flex-col flex-col-top-center" style="height: 75px;">
		<tm-sheet :height='60' :width='_width' :round='24' unit='px' _class='flex-center flex ' parenClass="relative"
			class="relative" :_style="_styletop" :followTheme="_btnTop && props.followTheme" :transprent="_transprent"
			:color="props.color" :margin="[0, 0]" :padding="_padding" :shadow="props.shadow" :outlined="props.outlined"
			:border="props.border" :borderStyle="props.borderStyle" :borderDirection="props.borderDirection"
			:linear="props.linear" :linearDeep="props.linearDeep" @click="itemClick">
			<tm-badge :fontSize="20" :color="c_font_style.dotColor" :eventPenetrationEnabled="true" :dot="props.dot"
				:count="props.count" :icon="props.dotIcon" :maxCount="props.maxCount">
				<view :class="[_active ? 'anifun' : '']" class="flex flex-col flex-col-center-center "
					:style="{ width: 65 + 'px', height: '30px' }">
					<slot>
						<tm-icon v-if="!_load" _style="line-height: 0px;" :color="_color"
							:font-size="c_font_style.iconSize"
							:name="(_active ? c_font_style.icon : (c_font_style.unicon || c_font_style.icon))"></tm-icon>

					</slot>
					<tm-icon v-if="_load" spin _style="line-height: 0px;" :color="_color"
						:font-size="c_font_style.iconSize" name="tmicon-loading"></tm-icon>

				</view>
			</tm-badge>
			<tm-text v-if="c_font_style.text !== ''" :color="_color" _class="pb-0" :font-size="c_font_style.textSize"
				:label='c_font_style.text'></tm-text>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
/**
 * 底部导航栏项目
 * @description 只能放置在tm-tabbar中。
 */
import tmBadge from "../tm-badge/tm-badge.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import {
	custom_props,
} from '../../tool/lib/minxs';
import { useTmpiniaStore } from '../../tool/lib/tmpinia';
import { getCurrentInstance, computed, watchEffect, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType, ComponentInternalInstance } from 'vue';
const store = useTmpiniaStore();
/**
 * click 项目被点击时触发。
 * beforeClick点击切换之前执行，如果返回false或者Promise<false>时，将阻止链接的切换。如果没有提供url链接地地址将只作为切换使用。
 */
const emits = defineEmits(["click", "beforeClick"])
const proxy = getCurrentInstance()?.proxy??null;
const props = defineProps({
	...custom_props,
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	transprent: {
		type: Boolean,
		default: true,
	},
	//背景主题色
	color: {
		type: String,
		default: 'white'
	},
	//默认的文字主题
	fontColor: {
		type: String,
		default: 'grey-darken-1'
	},
	linear: {
		type: String,
		default: ''
	},
	//激活后的主题色。
	activeColor: {
		type: String,
		default: 'primary'
	},
	//当前是否是活动项。
	active: {
		type: Boolean,
		default: false,
	},
	//是否开启向上凸起的按钮。
	btnTop: {
		type: Boolean,
		default: false,
	},
	text: {
		type: String,
		default: ''
	},
	icon: {
		type: String,
		default: ''
	},
	//未选中时的图标，如果不填写默认使用相同的图标。
	unicon: {
		type: String,
		default: ''
	},
	textSize: {
		type: Number,
		default: 20
	},
	iconSize: {
		type: Number,
		default: 38
	},
	dot: {
		type: [Boolean],
		default: false
	},
	dotColor: {
		type: [String],
		default: "red"
	},
	dotIcon: {
		type: [String],
		default: ""
	},
	//如果count为数字时，显示数字角标，如果为string是显示文本角标。
	count: {
		type: [Number, String],
		default: 0
	},
	maxCount: {
		type: [Number],
		default: 99
	},
	url: {
		type: [String],
		default: ""
	},
	//链接打开方式同官方。
	openType: {
		type: String as PropType<openUrlType>,
		default: "navigate"
	},
	//打开链接之前执行的勾子函数，返回fase阻止打开。也可以返回new Promise.
	beforeClick: {
		type: [Function, Boolean],
		default: () => false
	},
	load: {
		type: [Boolean, String],
		default: false
	},
	//自定项目数据，在执行beforeClick时，会返回给函数内部
	data: {
		type: [Object, String, Number],
		default: () => undefined
	}
})
const _btnTop = computed(() => props.btnTop)
const _transprent = computed(() => {
	if (_btnTop.value === true) return false;
	return true;
})
const _styletop = computed(() => {
	if (_btnTop.value !== true) return 'top:15px';
	return 'top:0px';
})

const _padding = computed(() => {
	return [0, 0];
})
const _load = ref(props.load)
const _active = ref(false)
const c_font_style = computed(() => {
	return { dotColor: props.dotColor, text: props.text, icon: props.icon, textSize: props.textSize, iconSize: props.iconSize, unicon: props.unicon }
})
const uid = uni.$tm.u.getUid(1);
const tmTabbarWidth = inject("tmTabbarWidth", computed(() => 50))
const _width = computed(() => {
	if (_btnTop.value === true) return 60;
	return tmTabbarWidth.value;
})
const nowUrl = inject("tmTabbarUrl", computed(() => ""))
const tmTabbarItemList = inject("tmTabbarItemList", computed<Array<string | number>>(() => []))
const nowUid = inject("tmTabbarUid", computed<string | number>(() => ""))
const tmTabbarItemSafe = inject("tmTabbarItemSafe", false)
const tmTabbarItemActive = inject("tmTabbarItemActive", computed(() => -1))
const tmTabbarItemAutoSelect = inject("tmTabbarItemAutoSelect", computed(() => false))
const _color = computed(() => {
	if (_active.value === true && !_btnTop.value) {
		if (store.tmStore.color && props.followTheme) {
			return store.tmStore.color
		}
		return props.activeColor
	}
	return props.fontColor
})


//父级方法。
let parent: any = proxy?.$parent
while (parent) {
	if (parent?.tmTabbarId == 'tmTabbarId' || !parent) {
		break;
	} else {
		parent = parent?.$parent ?? undefined
	}
}
if (parent) {
	parent.pushKey(uid)
}
onUnmounted(() => {
	if (parent) {
		parent.delKey(uid)
	}
})

if (tmTabbarItemAutoSelect.value) {
	_active.value = props.active || false;
}else{
	if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
		_active.value = true
	} else {
		_active.value = false
	}
}
function setActive() {
	if (nowUid.value == uid) {
		_active.value = true
	} else {
		_active.value = false
	}
}

watch([nowUid, () => props.active], () => {
	if (tmTabbarItemAutoSelect.value) {
		setActive()
	}
})
watch(tmTabbarItemActive, () => {
	if (!tmTabbarItemAutoSelect.value) {
		// 非自动选中，通过父组件的active来选中当前。
		if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
			nextTick(()=>{
				_active.value = true
			})
			
		} else {
			nextTick(()=>{
				_active.value = false
			})
			
		}
	}
})
watch([() => props.load], () => {
	_load.value = props.load
})
async function itemClick() {
	if (_load.value) return;
	if (typeof props.beforeClick === 'function') {
		_load.value = true
		let p = await props.beforeClick(props.data);
		if (typeof p === 'function') {
			p = await p(props.data);
		}
		_load.value = false
		if (!p) return;
	}

	emits("click");
	nextTick(() => {
		if (tmTabbarItemAutoSelect.value) {
			if (parent) {
				parent.setNowurl(props.url, uid)
			}
			setActive()
		}
		if (props.url == "") return
		uni.$tm.u.routerTo(props.url, props.openType)
	})

}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.anifun {
	animation: scale 0.2s ease;
}

@keyframes scale {
	0% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/* #endif */
</style>
